<template>
  <div class="word">
     <head></head>
    <div class="beifen">
      <image style="width:58px;height:65px;" src="root:img/create/biji@2x.png"></image>
      <text style="font-size:36px;margin-top:24px;color:rgba(19,32,63,1)">{{$t('login.trueWord')}}</text>
      <text class="attention">{{$t('login.pleasesave_word')}}</text>
      <div class="word-c">
        <text class="zhujici">{{text}}</text>
      </div>
      <div class="word-wrapper">
        <div v-for="(item,key) of master_keys" :key="key"   class="word-wrapper-item" :style="[{'margin-left':(key%4) === 0? 0: '20px'}]" @click="wxcButtonClicked(item)">
          <text style="text-align: center;line-height: 60px;font-size:'28px'" :style="[{color:item.isChecked?'rgba(70,120,245,1)':'rgba(102,102,102,1)'}]">{{item.key}}</text>
        </div>
      </div>
    </div>
    <div class="login-btn" @click="finish">
      <text style="color:#ffffff;font-size:24px;text-align: center;line-height:74px;
      ">{{$t('login.finish')}}</text>
    </div>
  </div>
</template>

<script>
import { WxcButton } from 'weex-ui'
const pref = weex.requireModule('pref')
export default {
  name: '',
  data() {
    return {
      master_keys:[],
      text:''
    }
  },
  components: {WxcButton},
  created() {
    var self = this
    var globalEvent = weex.requireModule('globalEvent') ;
    globalEvent.addEventListener("onPageInit", function (e) {
          var param = self.navigator.param();
          if(!param) return
          var keys = param.master_key.split(' ');
          keys.forEach(ele => {
            self.master_keys.push({
              key:ele,
              isChecked:false
            })
          });
          self.master_keys.sort((a,b)=>{
            const m = self.sort_word(a.key).charCodeAt()
            const n = self.sort_word(b.key).charCodeAt()
             return m - n
          })
    });
  },
  methods: {
    // 点击助记词
    wxcButtonClicked(e){
      if(e.isChecked) return
      this.text += e.key + ' '
      e.isChecked = true
      // 助记词排序算法
      this.master_keys.sort((a,b)=>{
        // 安卓不自主计算字符ASCII值
        const m = this.sort_word(a.key).charCodeAt()
        const n = this.sort_word(b.key).charCodeAt()
        return m - n
      })
    },
    // 随机从单词中选择一个字母
    sort_word(word){
      const l = word.length
      const s = Math.floor(Math.random()*l)
      return word.toLowerCase().substring(s,s+1)
    },
    // 确认完成
    finish(){
      var param = this.navigator.param() || this.master_keys;
      if(this.text.trim() !== param.master_key) {
        this.text = ''
        this.master_keys.forEach(item => {
          item.isChecked = false
        })
        this.toast(this.$t('wallet.sure_word'))
      }else {
        this.save_userInfo()
       
      }
    },
    save_userInfo(){
      var param = this.navigator.param();
      const device = weex.requireModule('device')
      let account = pref.get('account')
      const current_user_key = pref.getString('current_user_key') || ''
      let current_user = account[current_user_key]
      if(account&&current_user){
         const p = {
           name:current_user.user.name,
           account_id:current_user.wallet.account_id,
           device_id:device.deviceId(),
           public_key_hex:current_user.wallet.public_key_hex
        }
        this.$http.post('wallet/saveUserInfo',p,(res)=>{
          current_user['is_sure'] = true
          account[current_user_key] = current_user
          pref.set('account',account)
          this.toast(this.$t('wallet.sure_success'))
          this.push('root:pages/login/backup.js',{master_key:param.master_key,master_seed:param.master_seed})
        })
      }else {
        this.pref.set(account,{})
        pref.setString('current_user_key','')
        this.toast('请重新创建钱包')
        this.navigator.presentFull({url:'root:pages/login/create.js',animated:false})
      }
     
    }
  }
}
</script>
<style scoped>
.word{
  position: absolute;
  top: 0;
  bottom: 0;
  flex:1;
}
.beifen{
  margin-top: 80px;
  width: 750px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.attention{
  margin-top: 68px;
  font-size: 28px;
  color: rgba(102,102,102,1);
}
.word-c{
  width: 690px;
  background-color: rgba(70,120,245,0.1);
  padding-top: 44px;
  padding-left: 18px;
  padding-bottom: 44px;
  margin-top: 28px;
  border-radius: 20px;
  padding-right: 18px;
  min-height: 210px;
}
.zhujici{
  font-size: 28px;
  color: rgba(102,102,102,1);
  line-height: 48px;
}
.login-btn{
  width: 690px;
  height: 80px;
  background-color: rgba(70,120,245,1);
  margin-top: 100px;
  border-radius: 10px;
  position: absolute;
  bottom: 140px;
  left: 30px;
}
.word-wrapper{
  width: 690px;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  /* justify-content: space-between; */
}
.word-wrapper-item{
  width: 156px;
  height: 60px;
  margin-bottom: 20px;
  border-width: 1px;
  border-style:solid;
  border-color: #cccccc;
  border-radius: 8px;
  
}

.is-active{

}
</style>